﻿@page "/news/release-notes/100"

<Seo Canonical="news/release-notes/100" Title="Blazorise v1.0" Description="This blog post contains the changelog of the most recent bug fixes, improvements and new features included in the Blazorise v1.0 release." ImageUrl="img/news/100/v100.png" />

<NewsPageTitle>
    Announcing Blazorise 1.0
</NewsPageTitle>

<NewsPagePostInfo UserName="Mladen Macanović" ImageName="mladen" PostedOn="March 4st, 2022" Read="7 min" />

<NewsPageImage Source="img/news/100/v100.png" Text="Blazorise v1.0" />

<Paragraph>
    Today, we are happy to announce the long-awaited release of Blazorise 1.0. In this post, we're covering many new Blazorise features that will make your app development easier to build and use, along with some of the API changes required to get you started.
</Paragraph>

<Paragraph>
    The new year is often the time for new beginnings, and 2022 is on schedule to mark a new chapter in Blazorise's history. Slowly but steadily, we were getting to release the latest major version of the library — Blazorise 1.0; The road to getting here was not easy.
</Paragraph>

<Paragraph>
    Throughout the last three years, the core of the Blazorise has seen a lot of improvements and refactoring to bring it to the next level in terms of maintainability, reliability, and performance. We have started as an early Blazor adaptor and covered all its changes starting from early previews to the latest .NET 6. In addition, a lot of refactoring and API changes had to be done.
</Paragraph>

<NewsPageSubtitle>
    Blazorise 1.0 Highlights 💡
</NewsPageSubtitle>

<UnorderedList>
    <UnorderedListItem>
        <Strong>Chart</Strong> support for Chart.js v3.x
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>NumericPicker</Strong> completely new input component for numeric values
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>Video</Strong> extension to play HLS and DASH media with DRM protection
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>QRCode</Strong> extension to generate QR codes
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>DatePicker</Strong> improvements and fixes
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>Drag & Drop</Strong> components to drag & drop any content
    </UnorderedListItem>
    <UnorderedListItem>
        <Strong>Cascading Type Parameter</Strong> making it easier to write and define nested components
    </UnorderedListItem>
</UnorderedList>

<NewsPageSubtitle>
    Migration 🛠
</NewsPageSubtitle>

<Paragraph>
    Since this is a big release, we had to clear all the APIs left so far. Starting from now, we plan to have a long-term-support, and we want to have a stable API. As a result, many steps need to be done to migrate from 0.9.5 to 1.0. Based on our experience with some of our partners, it shouldn't be too problematic to migrate since not everyone uses all the features. We hope this will be the same for you and that there will not be too many issues on your side.
</Paragraph>

<Paragraph>
    So, let's start.
</Paragraph>

<OrderedList>
    <UnorderedListItem>
        Change chart script file to <Code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js&quot;&gt;&lt;/script&gt;</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Replace <Code>NumericEdit</Code> with <Code>NumericPicker</Code>. <Code>NumericEdit</Code> is now made around the native <Code>input type="number"</Code> so a lot of its formating features are moved to the new <Code>NumericPicker</Code> component.
    </UnorderedListItem>
    <UnorderedListItem>
        Rename <Code>DecimalsSeparator</Code> to <Code>DecimalSeparator</Code> on the <Code>DataGridColumn</Code> and <Code>NumericPicker</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Rename <Code>MaxMessageSize</Code> to <Code>MaxChunkSize</Code>. (changed to convey the parameter meaning better)
    </UnorderedListItem>
    <UnorderedListItem>
        Remove <Code>Fullscreen</Code> parameter on <Code Tag>ModalContent</Code> and replace it with <Code>Size="ModalSize.Fullscreen"</Code> parameter.
    </UnorderedListItem>
    <UnorderedListItem>
        Remove <Code>NotificationType</Code>, <Code>Message</Code>, and <Code>Title</Code> parameter from <Code Tag>NotificationAlert</Code> component.
    </UnorderedListItem>
    <UnorderedListItem>
        Move <Code>RightAligned</Code> parameter from <Code Tag>BarDropdownMenu</Code> to <Code Tag>BarDropdown</Code> component.
    </UnorderedListItem>
    <UnorderedListItem>
        Rename any usage of the <Code>ChangeTextOnKeyPress</Code> parameter into <Code>Immediate</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Rename any usage of <Code>DelayTextOnKeyPress</Code> parameter into <Code>Debounce</Code> and <Code>DelayTextOnKeyPressInterval</Code> into <Code>DebounceInterval</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Replace all <Code>Left</Code> and <Code>Right</Code> enums with <Code>Start</Code> and <Code>End</Code> for the following enum types: <Code>Direction</Code>, <Code>Float</Code>, <Code>Placement</Code>, <Code>NotificationLocation</Code>, <Code>Side</Code>, <Code>SnackbarLocation</Code>, <Code>SnackbarStackLocation</Code>, <Code>TabPosition</Code>, and <Code>TextAlignment</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Replace all <Code>FromLeft</Code>, <Code>FromRight</Code>, <Code>RoundedLeft</Code>, and <Code>RoundedRight</Code> enums with <Code>FromStart</Code>, <Code>FromEnd</Code>, <Code>RoundedStart</Code>, and <Code>RoundedEnd</Code> for the <Code>Border</Code> utilities.
    </UnorderedListItem>
    <UnorderedListItem>
        Replace all <Code>FromLeft</Code> and <Code>FromRight</Code> with <Code>FromStart</Code>, <Code>FromEnd</Code> for the <Code>Margin</Code> and <Code>Padding</Code> utilities.
    </UnorderedListItem>
    <UnorderedListItem>
        Replace all <Code>AddLabel</Code> with <Code>AddLabels</Code> method on chart instance.
    </UnorderedListItem>
    <UnorderedListItem>
        Change enum value from <Code>None</Code> to <Code>Default</Code> for the following enum types: <Code>Color</Code>, <Code>Background</Code>, <Code>TextColor</Code>, <Code>Alignment</Code>, <Code>BorderRadius</Code>, <Code>BorderSize</Code>, <Code>Direction</Code>, <Code>DisplayDirection</Code>, <Code>FigureSize</Code>, <Code>IconSize</Code>, <Code>JustifyContent</Code>, <Code>OverflowType</Code>, <Code>SnackbarColor</Code>, <Code>Target</Code>, <Code>TextAlignment</Code>, <Code>TextOverflow</Code>, <Code>TextTransform</Code>, <Code>TextWeight</Code>, <Code>VerticalAlignment</Code>, <Code>Visibility</Code>, <Code>Size</Code>, and <Code>SnackbarLocation</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Obsolete typography parameters <Code>Alignment</Code>, <Code>Color</Code>, <Code>Transform</Code>, and <Code>Weight</Code> are removed in favor of <Code>TextAlignment</Code>, <Code>TextColor</Code>, <Code>TextTransform</Code>, and <Code>TextWeight</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        Remove any use of an obsolete component <Code Tag>InlineField</Code>.
    </UnorderedListItem>
    <UnorderedListItem>
        The Datagrid's obsolete <Code>Direction</Code> parameter has now been removed. Instead, please use the <Code>SortDirection</Code> parameter if you weren't already..
    </UnorderedListItem>
    <UnorderedListItem>
        Rename <Code Tag>Tabs</Code> <Code>Mode</Code> parameter into <Code>RenderMode</Code>.
    </UnorderedListItem>
</OrderedList>

<NewsPageSubtitle>
    Highlights 🚀
</NewsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Chart v3
</Heading>

<Paragraph>
    In this release, we bring long-awaited support for ChartJS v3. Unfortunately, it was impossible to leave support for previous versions considering there were too many breaking changes between v2 and v3.
</Paragraph>

<Paragraph>
    With Chart v3, we now support almost all v3 configuration settings. In addition, we took great care to document most of the dataset and option fields so that IntelliSense will give you suggestions on how to define the chart correctly.
</Paragraph>

<Paragraph>
    Since a lot was changed to support ChartJS v3 the migration would take too long to explain so it is best to follow the the <Anchor To="https://www.chartjs.org/docs/latest/migration/v3-migration.html" Target="Target.Blank">Chart.js migration guide</Anchor> as a general rule.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    NumericPicker
</Heading>

<Paragraph>
    The completely new <Code>NumericPicker</Code> component is created as a replacement for the <Code>NumericEdit</Code> component.
    All the formating features from <Code>NumericEdit</Code> are moved to the new component. This breaking change was needed because
    we felt there was no need to support two similar  behavior components. So, <Code>NumericEdit</Code> is left to serve as
    a native HTML input element, and all the custom and advanced stuff are now part of the new <Code>NumericPicker</Code>.
</Paragraph>

<Paragraph>
    <Code>NumericPicker</Code> component has many new features like:
</Paragraph>

<OrderedList>
    <OrderedListItem>currency mask and symbols</OrderedListItem>
    <OrderedListItem>thousand group separators</OrderedListItem>
    <OrderedListItem>configurable rounding methods</OrderedListItem>
    <OrderedListItem>floating zeros</OrderedListItem>
    <OrderedListItem>proper min and max input mode</OrderedListItem>
</OrderedList>

<Paragraph>
    , and many more. We hope the new <Code>NumericPicker</Code> will serve you well.
</Paragraph>

<Paragraph>
    It can be seen in action on the <Anchor To="docs/components/numeric-picker">NumericPicker page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Video
</Heading>

<Paragraph>
    We worked hard to bring you a very new <Code Tag>Video</Code> component based upon the excellent <Anchor To="https://plyr.io/" Target="Target.Blank">Plyr</Anchor> video player. The new component fully supports streaming media by implementing <Anchor To="https://github.com/video-dev/hls.js/">HLS</Anchor> and <Anchor To="https://github.com/Dash-Industry-Forum/dash.js">DASH</Anchor> playback media formats.
</Paragraph>

<Paragraph>
    The component is pretty flexible to use and has most of the video control methods like <Code>Play()</Code>, <Code>Pause()</Code>, <Code>Stop()</Code>, and many others, including also events that can give you the current state of the player.
</Paragraph>

<Paragraph>
    The new component and its usage can be seen on <Anchor To="docs/extensions/video">Video page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    DatePicker
</Heading>

<Paragraph>
    It is now possible to use date picker to select a range of dates and pick multiple dates. The new feature can be enabled with <Code>SelectionMode</Code> parameter. Once enabled, you need to use <Code>Dates</Code> parameters to read or set the days.
</Paragraph>

<Paragraph>
    The new component with examples can be seen on <Anchor To="docs/components/date-picker">DatePicker page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    QRCode
</Heading>

<Paragraph>
    This component is created with the help from one of our community members, <Anchor To="https://github.com/njannink">njannink</Anchor>. The QRCode component is based on <Anchor To="https://github.com/codebude/QRCoder" Target="Target.Blank">QRCoder</Anchor>, and it is fully running on .NET code without any trace of JavaScript.
</Paragraph>

<Paragraph>
    You can see it in action on <Anchor To="docs/extensions/qrcode">QRCode page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Charts Trendline
</Heading>

<Paragraph>
    Charts.Trendline is a new extension and is used to draws a linear trendline in your Chart.
</Paragraph>

<Paragraph>
    You can see it in action on <Anchor To="docs/extensions/chart-trendline">Trendline page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Utilities
</Heading>

<Paragraph>
    There were  some changes in our color utilities. To prepare them for some advanced scenarios in the future, they are converted to be <Anchor To="https://docs.microsoft.com/en-us/dotnet/architecture/microservices/microservice-ddd-cqrs-patterns/enumeration-classes-over-enum-types" Target="Target.Blank">complex enums</Anchor>. The affected enums are <Code>Color</Code>, <Code>Background</Code>, <Code>TextColor</Code>, and <Code>Target</Code>. This change brings a new way of defining enums values, and it is now possible to define colors with custom names, e.g., <Code>Color="btn-purple"</Code>.
</Paragraph>

<Paragraph>
    While at the moment they still have the same API, in the future, we will introduce some more advanced features that will allow us to chain options, e.g., <Code>Color="Color.Primary.WithGradient"</Code>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Modal
</Heading>

<Heading Size="HeadingSize.Is4">
    Animations
</Heading>

<Paragraph>
    We reworked animations, and they are now calculated dynamically in Blazor without the need for any JavaScript. Also, with an additional API, you now have more control over the animation.
</Paragraph>

<Paragraph>
    <UnorderedList>
        <UnorderedListItem>
            <Strong>Animated</Strong>: Controls whether the modal should animate.
        </UnorderedListItem>
        <UnorderedListItem>
            <Strong>AnimationDuration</Strong>: Sets the modal animation duration in ms.
        </UnorderedListItem>
    </UnorderedList>
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Render Mode
</Heading>

<Paragraph>
    You can now choose from three different rendering modes on the <Code Tag>Modal</Code> component, similar to what we already have on the <Code>Tabs</Code> component.
</Paragraph>

<Paragraph>
    <UnorderedList>
        <UnorderedListItem>
            <Strong>Default</Strong>: Always renders the modal HTML content to the DOM.
        </UnorderedListItem>
        <UnorderedListItem>
            <Strong>LazyLoad</Strong>: Lazy loads modal, meaning the modal HTML content will only be rendered/loaded the first time it is visited.
        </UnorderedListItem>
        <UnorderedListItem>
            <Strong>LazyReload</Strong>: Lazy loads modal every time, meaning the modal HTML content will have its HTML re-rendered to the DOM every time.
        </UnorderedListItem>
    </UnorderedList>
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Cascading Type Parameter
</Heading>

<Paragraph>
    .NET6 brought us a new feature, <Code>CascadingTypeParameter</Code>, that reduces the boilerplate code we need to write for Generic Parent/Child components.
    Please refer to <Blazorise.Link To="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-6.0#infer-generic-types-based-on-ancestor-components">CascadingTypeParameter Microsoft Docs</Blazorise.Link>
    for more information.
</Paragraph>

<Paragraph>
    The following components now have <Code>CascadingTypeParameter</Code> support:
</Paragraph>
<UnorderedList>
    <UnorderedListItem>DataGrid</UnorderedListItem>
    <UnorderedListItem>Select</UnorderedListItem>
    <UnorderedListItem>RadioGroup</UnorderedListItem>
</UnorderedList>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        <Strong>Note:</Strong> We've found out there might be a few caveats when using the feature. You'll be just fine with removing the explicit references to the Generic Type on the children component for most cases. But for the very few instances that Blazor complains, it cannot compile, explicitly define the Generic Type.
        Here's an example:
        <Paragraph Class="mb-0">
            This will not work:
        </Paragraph>
        <Paragraph>
            <Code>&lt;DataGridAggregate Field="@@nameof( Employee.IsActive )" AggregationFunction=@@(DataGridAggregate&lt;Employee&gt;.TrueCount) /&gt;</Code>
        </Paragraph>
        <Paragraph Class="mb-0">
            These will work:
        </Paragraph>
        <Paragraph Class="m-0">
            <Code>&lt;DataGridAggregate Field="@@nameof( Employee.IsActive )" AggregationFunction=@@((x,y) => DataGridAggregate&lt;Employee&gt;.TrueCount(x,y)) /&gt;</Code>
        </Paragraph>
        <Paragraph Class="m-0">
            <Code>&lt;DataGridAggregate TItem="Employee" Field="@@nameof( Employee.IsActive )" AggregationFunction=@@(DataGridAggregate&lt;Employee&gt;.TrueCount) /&gt;</Code>
        </Paragraph>
    </AlertDescription>
</Alert>

<Heading Size="HeadingSize.Is3">
    DataGrid
</Heading>

<Heading Size="HeadingSize.Is4">
    Scroll API
</Heading>

<Paragraph>
    Added <Code>ScrollTo</Code> Api to <Code>DataGrid</Code>. You may now use the <Code>ScrollToRow</Code> and <Code>ScrollToPixels</Code> API when <Code>FixedHeader</Code> or <Code>Virtualize</Code> is set on your <Code>DataGrid</Code>.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Detail Row Trigger
</Heading>

<Paragraph>
    <Code>DetailRowTrigger</Code> has been changed to now have an argument of <Code>DetailRowTriggerEventArgs</Code> instead of an item. This will enable us to keep providing new features by adding to this context.
</Paragraph>

<Paragraph>
    Whereas before you add:
    <UnorderedList>
        <UnorderedListItem><Code>DetailRowTrigger="((item)=> item.Salaries?.Count > 0 && item.Id == selectedEmployee?.Id)"</Code></UnorderedListItem>
    </UnorderedList>
</Paragraph>

<Paragraph>
    now you change to:
    <UnorderedList>
        <UnorderedListItem><Code>DetailRowTrigger="((context)=> context.Item.Salaries?.Count > 0 && context.Item.Id == selectedEmployee?.Id)"</Code></UnorderedListItem>
    </UnorderedList>
</Paragraph>

<Paragraph>
    We've introduced the following <Code>DetailRowTrigger</Code> features:
    <UnorderedList>
        <UnorderedListItem>
            <Code>Toggleable</Code> Previously, if you selected an item where <Code>DetailRowTemplate</Code> was already showing, and if DetailRowTrigger evaluated to true, it would hide to DetailRow. By setting this to false, it now stays visible.
        </UnorderedListItem>
        <UnorderedListItem>
            <Code>Single</Code> By setting this property to true, only one DetailRowTemplate will be displayed at a time.
        </UnorderedListItem>
        <UnorderedListItem>
            <Code>DetailRowTriggerType</Code> You may now select between two types, Manual and RowClick. By setting the type to Manual, you may further control the DetailRowTemplate display behavior programmatically by using the existing <Code>ToggleDetailRow</Code>.
        </UnorderedListItem>
    </UnorderedList>
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Click behavior
</Heading>

<Paragraph>
    Added <Code>PreventRowClick</Code> to <Code>DataGridColumn</Code> / <Code>DataGridCommandColumn</Code>. By setting this parameter to true, the column cell will not longer trigger the <Code>RowClicked</Code> and subsequent events.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Validation
</Heading>

<Paragraph>
    Added <Code>ValidationItemCreator</Code> Parameter. You may use this parameter to provide and override the way to instantiate an item for validation purposes.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Aggregates
</Heading>

<Paragraph>
    Added <Code>AggregateRowPosition</Code> Parameter to <Code>Datagrid</Code>. By setting the DataGridAggregateRowPosition, you will now be able to position the aggregate row, just like the pager.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    FileEdit
</Heading>

<Paragraph>
    Added MaxFileSize Parameter, this will default to long.MaxValue
</Paragraph>

<Paragraph>
    Added FileInvalidReason to the FileEndedEventArgs so you may track what went wrong in case the file upload was not successful.
</Paragraph>

<UnorderedList>
    <UnorderedListItem>None</UnorderedListItem>
    <UnorderedListItem>MaxLengthExceeded</UnorderedListItem>
    <UnorderedListItem>UnexpectedBufferChunkLength</UnorderedListItem>
    <UnorderedListItem>TaskCancelled</UnorderedListItem>
    <UnorderedListItem>UnexpectedError</UnorderedListItem>
</UnorderedList>

<Heading Size="HeadingSize.Is3">
    Drag & Drop
</Heading>

<Paragraph>
    We're finally bringing support for a long-time requested drag & drop feature in this release. The new feature is comprised of <Code>DropContainer</Code> and <Code>DropZone</Code> components and is designed to be flexible and easy to use. It supports item templating, selectors for drop items, styling, and more.
</Paragraph>

<Paragraph>
    The new component and its usage can be seen on <Anchor To="docs/components/dragdrop">Drag & Drop page</Anchor>.
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Auto Complete
</Heading>

<Paragraph>
    Introduced <Code>CloseOnSelection</Code> Parameter. You will be able to set this parameter to false, so the auto complete's dropdown does not close on selections.
    <Alert Color="Color.Info" Visible Margin="Margin.Is3.FromTop">
        <AlertDescription>
            <Strong>Note:</Strong> This feature will only work with multiple selection.
        </AlertDescription>
    </Alert>
</Paragraph>

<Heading Size="HeadingSize.Is3">
    Dropdown
</Heading>

<Paragraph>
    When using nested dropdowns, the nested dropdowns will now consider the configured direction.
</Paragraph>

<NewsPageSubtitle>
    Let's stop here!
</NewsPageSubtitle>

<Paragraph>
    Writing all-new features wouldn't make sense, as that would make this post way too long. If you want to see a full list of all that has changed, go to our <Anchor To="https://github.com/Megabit/Blazorise/issues/3127" Target="Target.Blank">GitHub page</Anchor>.
</Paragraph>

<NewsPageSubtitle>
    Community PRs
</NewsPageSubtitle>

<UnorderedList>
    <UnorderedListItem>
        <Anchor To="https://github.com/Xeevis">Xeevis</Anchor> did great work by creating a new <Code>Blazorise.Icons.Bootstrap</Code> package to map <Anchor To="https://icons.getbootstrap.com/#install" Target="Target.Blank">Bootstrap icons</Anchor>. The list of mapped icons covers almost 100% of icons, except for some rarely used. We have already requested them on the Bootstrap official repository, and hopefully, they will be included soon.
    </UnorderedListItem>
    <UnorderedListItem>
        <Anchor To="https://github.com/njannink">njannink</Anchor> created a QRCode images. The new component is based on <Anchor To="https://github.com/codebude/QRCoder" Target="Target.Blank">QRCoder</Anchor>, and it is fully running on .NET code without any trace of JavaScript.
    </UnorderedListItem>
    <UnorderedListItem>
        <Anchor To="https://github.com/WolfgangKluge">WolfgangKluge</Anchor> helped to add a missing actions to our Markdown component.
    </UnorderedListItem>
    <UnorderedListItem>
        <Anchor To="https://github.com/ledpup">ledpup</Anchor> Added support for the trendline plugin to the Chart extension.
    </UnorderedListItem>
    <UnorderedListItem>
        <Anchor To="https://github.com/soenneker">soenneker</Anchor> helped to add a a range option to the DatePicker component.
    </UnorderedListItem>
    <UnorderedListItem>
        <Anchor To="https://github.com/gkochera">gkochera</Anchor> fixed the sort templates in DataGrid extension.
    </UnorderedListItem>
</UnorderedList>

<NewsPageSubtitle>
    Thanks, and stay tuned for more
</NewsPageSubtitle>

<Paragraph>
    We would like to say a sincere thanks to all our contributors who helped in making this release. Special thanks to our partners at Volosoft for being a great partner and supporting us so far.
</Paragraph>

<Paragraph>
    Finally, this successful release wouldn't have been possible without our amazing community—so thank you for being part of it. And that's a wrap. We'll be back again with another exciting release soon, so stay tuned.
</Paragraph>